<template>
  <div v-show="tableData.length">
    <header class="game_modal_header">机构排行榜</header>
    <div class="schedule_content">
      <ul>
        <li v-for="(item, index) in tableData" :key="index" class="org_item gl_clear">
          <div class="org_item_rank rank gl_fl" :class="{rank_1: item.finalRank === 1, rank_2: item.finalRank === 2, rank_3: item.finalRank === 3}">
            {{ item.finalRank }}
          </div>
          <div class="org_item_logo gl_fl">
            <img class="org_item_logo_img" :src="getStaticFileUrl(item.photoUrl)" @error="errorPhoto">
          </div>
          <div class="org_item_name gl_fl">{{ item.name }}</div>
          <ul class="org_item_medal_list gl_fl">
            <li>
              <div class="org_item_medal_wrap">
                <img src="@/assets/images/league/gold.png" alt="">
              </div>
              <div class="org_item_medal_num">
                {{ item.subRankList && item.subRankList[0] ? item.subRankList[0].subRankCount : '' }}
              </div>
            </li>
            <li>
              <div class="org_item_medal_wrap">
                <img src="@/assets/images/league/silver.png" alt="">
              </div>
              <div class="org_item_medal_num">
                {{ item.subRankList && item.subRankList[1] ? item.subRankList[1].subRankCount : '' }}
              </div>
            </li>
            <li>
              <div class="org_item_medal_wrap">
                <img src="@/assets/images/league/bronze.png" alt="">
              </div>
              <div class="org_item_medal_num">
                {{ item.subRankList && item.subRankList[2] ? item.subRankList[2].subRankCount : '' }}
              </div>
            </li>
            <li>
              <div class="org_item_medal_wrap">总分</div>
              <div class="org_item_medal_num total_num">{{ item.finalPoints }}</div>
            </li>
          </ul>
        </li>
      </ul>
      <div class="more_wrap gl_clear">
        <span class="more_btn pointer gl_fr" @click="jumpToMechanism">更多</span>
      </div>
    </div>
  </div>
</template>

<script>
import {
  api_GET_EventsManagementEventResultUnifiedPointRankList
} from '@/extend/api/gameswaggerApi/app';

import {
  Api_GET_EventsManagementEventResultUnifiedPointRankListQO
} from '@/lib/form/game/swaggerForm';

import defaultPhoto from '@/assets/images/face_default.png';

export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      defaultPhoto: defaultPhoto, // 默认照片
      pageLoading: false,
      tableData: [],
      qo: new Api_GET_EventsManagementEventResultUnifiedPointRankListQO()
    };
  },
  watch: {
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.getPageList();
        }
      }
    }
  },
  methods: {
    // 获取页面数据
    getPageList (page) {
      const _qo = JSON.parse(JSON.stringify(this.qo));
      _qo.Page = 1;
      _qo.SkipCount = 0;
      _qo.CompetitionId = this.gameInfo.id;
      _qo.Type = 'Delegation';
      _qo.IncludeFinal = true;
      _qo.IncludeSubRank = true;
      delete _qo.EventTypeCode;
      this.apiRankList(_qo);
    },
    // UnifiedPointRankList
    apiRankList(qo) {
      api_GET_EventsManagementEventResultUnifiedPointRankList(qo)
        .then(
          res => {
            this.tableData = res.items;
            console.log(res);
          }
        )
        .catch(error => { console.log(error); });
    },
    // 跳转至机构排行
    jumpToMechanism () {
      this.$router.push({
        name: 'Mechanism'
      });
    },
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    }
  }
};
</script>

<style lang="scss" scoped>
  .pointer {
    cursor: pointer;
  }

  .org_item {
    box-sizing: border-box;
    width: 100%;
    height: 90px;
    padding: 0 20px;
    margin-bottom: 6px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
  }
  .org_item_rank {
    width: 42px;
    height: 100%;
    margin-right: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .org_item_logo {
    width: 52px;
    height: 100%;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .org_item_logo_img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
  }
  .org_item_name {
    width: 500px;
    height: 100%;
    margin-right: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #353434;
    line-height: 22px;
  }
  .org_item_medal_list {
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .org_item_medal_wrap {
    min-width: 60px;
    padding-top: 10px;
    height: 40px;
    margin-bottom: 13px;
    font-size: 14px;
    text-align: center;
    color: #353434;
    line-height: 30px;
  }
  .org_item_medal_num {
    min-width: 60px;
    font-size: 14px;
    text-align: center;
    color: #353434;
    font-weight: bold;
    line-height: 22px;
  }
  .total_num {
    min-width: 100px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #de1c1c;
  }

  .rank {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../../../../../assets/images/league/rank.png');
  }
  .rank_1 {
    background-image: url('../../../../../assets/images/league/rank_1.png');
  }
  .rank_2 {
    background-image: url('../../../../../assets/images/league/rank_2.png');
  }
  .rank_3 {
    background-image: url('../../../../../assets/images/league/rank_3.png');
  }

  .more_wrap {
    padding: 20px;
  }
  .more_btn {
    color: #D01528;
    font-size: 12px;
  }
</style>
